<template>
  <div id="zhu" class="zhu-container">
    zhu
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { zhuData } from '@/api/tao'
export default {
  name: 'ZhuPage',
  data() {
    return {
      option: {
        xAxis: {
          type: 'category',
          grid: {
            // 距离 上右下左 的距离
            left: '0%',
            right: '3%',
            bottom: '3%',
            top: '3%',
            // 是否包含文本
            containLabel: true,
            // 是否显示直角坐标系网格
            show: true,
            //grid 四条边框的颜色
            borderColor: 'rgba(0, 240, 255, 0.3)'
        },
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          // 刻度设置
          axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false
                },
                // x坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // x坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                }
        },
        yAxis: [
            {
                // 使用数据的值设为刻度文字
                type: 'value',
                // 刻度设置
                axisTick: {
                    // true意思：图形在刻度中间
                    // false意思：图形在刻度之间
                    alignWithLabel: false,
                    // 不显示刻度
                    show: false
                },
                // x坐标轴文字标签样式设置
                axisLabel: {
                    color: '#4c9bfd'
                },
                // x坐标轴颜色设置
                axisLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)',
                        // width:8,  x轴线的粗细
                        // opcity: 0,   如果不想显示x轴线 则改为 0
                    }
                },
                // y轴 分割线的样式 
                splitLine: {
                    lineStyle: {
                        color: 'rgba(0, 240, 255, 0.3)'
                    }
                }
            }
        ],
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)'
            },
            // 柱子颜色
        itemStyle: {
            color: '#fac858'
        },
        // 鼠标经过柱子颜色
        emphasis: {
            itemStyle: {
                color: '#409eff'
            }
        },
          }
        ]
      }
    }
  },
  watch: {
    option: {
      handler(newVal, oldVal) {
        var myChart = echarts.init(document.getElementById('zhu'))
        if (newVal) {
          myChart.setOption(newVal)
        } else {
          myChart.setOption(oldVal)
        }
      },
      deep: true
    }
  },
  mounted() {
    var myChart = echarts.init(document.getElementById('zhu'))
    myChart.setOption(this.option)
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const { data } = await zhuData()
      this.option.xAxis.data = data.data[0].subject
      this.option.series[0].data = data.data[0].score
      // console.log(data)
    }
  }
}
</script>

<style>
#zhu{
    height: 400px;
}
</style>
